import React, { Component, createRef } from 'react'

export default class App extends Component {
  state = {
    bBar: false,
  }
  // !#1 创建 ref 引用
  inputRef = createRef()
  handleClick = () => {
    this.setState({ bBar: !this.state.bBar })
  }
  render() {
    return (
      <div>
        App
        <div>
          {/* //!#2 绑定 ref */}
          {this.state.bBar ? (
            <input ref={this.inputRef} />
          ) : (
            <button onClick={this.handleClick}>回复</button>
          )}
        </div>
      </div>
    )
  }
  componentDidUpdate() {
    // !#3 也可以在更新数据完毕的勾子函数里面，进行聚焦的操作
    this.inputRef.current.focus()
  }
}
